<template>
	<view class="page padBottom30">
		<u-navbar bgColor="#333333" title="我的" placeholder leftIconColor="#00000000" :titleStyle="titleStyle">
		</u-navbar>
		<view class="topV">
			<view class="viewV">
				<view class="item1">
					<view v-if="userInfo" class="tv1" @click.stop="onNameClick">Hi～，{{userInfo.nickname}}</view>
					<view class="tv2" v-if="userInfo.vip==1">
						<image class="vipIv" src="../../static/me/vip.svg"></image>
						<text class="tv">{{userInfo.vip_text}}</text>
					</view>
				</view>
				<view class="shopV" @click.stop="onShopClick()">
					<image class="shopIv" src="https://s1.ax1x.com/2023/04/24/p9mKJne.png"></image>
					<view class="shopTv">{{nameShop}}</view>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
				<view class="item2" v-if="userInfo.vip!=1">
					<view class="tv1">
						<image class="moneyIv" src="../../static/me/tab_vip.svg"></image>
						开通会员卡预计省¥500/年
					</view>
					<view class="tv2" @click.stop="onViewVipClick">会员充值 ></view>
				</view>
			</view>
			<image class="topIv" :src="userInfo.avatar" @click.stop="onAvatarClick"></image>
		</view>
		<view class="mlogin" v-if="userInfo.mobile==''||!userInfo.mobile">
			<text class="zhangname">点击绑定手机号,确保账户安全</text>
			<button class="loginTv1_new" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">去绑定</button>
		</view>

		<view class="practiceCardV" v-if="false">
			<view class="practiceV" @click="onHeartClick">
				<view class="practiceItemV">
					<image src="../../static/me/practice.svg"></image>
					随心练(0)
				</view>
				买课享最低优惠
			</view>
			<view style="background: #ffffff; height: 40rpx; width: 1rpx;"></view>
			<view class="cardV" @click="onPurposeClick">
				<view class="cardItemV">
					<image src="../../static/me/card.svg"></image>
					心意卡
				</view>
				送好友一份你的心意
			</view>
		</view>

		<view class="bottomV">
			<view class="listV" v-for="(item,index) in dataList" :key="index" @tap="onItemClick(item)">
				<view class="itemV">
					<view class="itemTv1">{{item.name}}</view>
					<view :class='item.type==2?"itemTv2":"itemTv3"'>{{item.description}}</view>
					<u-icon name="arrow-right" color="#e8e8e8"></u-icon>
				</view>
				<view v-if="index!=dataList.length-1" class="lineV"></view>
			</view>
		</view>

		<uni-popup ref="user" type="center">
			<view class="alert-wrapper">
				<view class="title-wrapper">修改头像</view>
				<view class="avator">
					<image class="avator" :src="avatarUrl"></image>
					<button v-if="isVersion" class="text" open-type="chooseAvatar"
						@chooseavatar="onChooseAvatar">修改头像</button>
					<button v-if="!isVersion" class="text" @click="onAvatarToClick()">修改头像</button>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="userName" type="center">
			<view class="alert-wrapper">
				<view class="title-wrapper">修改昵称</view>
				<view class="item-wrapper">
					<input maxlength="20" type="nickname" v-model="nickName" placeholder="请输入昵称" @blur="onNickname" />
				</view>
				<view class="quedingTv" @click="onSureClick">确定</view>
			</view>
		</uni-popup>

		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: "我要健身",
					avatar: ""
				},
				titleStyle: {
					"color": "#ffffff"
				},
				dataList: [{
						name: "查看会员权益",
						description: "",
						type: "1",
						id: 1
					},
					{
						name: "账户列表",
						description: "",
						type: "1",
						id: 22
					},
					{
						name: "我的订单",
						description: "",
						type: "1",
						id: 21
					},
					{
						name: "我的收藏",
						description: "",
						type: "1",
						id: 2
					},
					{
						name: "时效卡",
						description: "",
						type: "1",
						id: 23
					},
					// {
					// 	name: "共享店铺",
					// 	description: "",
					// 	type: "1",
					// 	id: 3
					// },
					{
						name: "SuperRank排名",
						description: "",
						type: "1",
						id: 4
					},
					// {
					// 	name: "会员勋章",
					// 	description: "开通会员，解锁荣耀",
					// 	type: "1",
					// 	id: 5
					// },
					// {
					// 	name: "手机号",
					// 	description: "点击绑定，以免错过预约",
					// 	type: "2",
					// 	id: 6
					// },
					// {
					// 	name: "代金券",
					// 	description: "",
					// 	type: "1",
					// 	id: 7
					// }, {
					// 	name: "邀请有礼",
					// 	description: "送好友¥30优惠券",
					// 	type: "2",
					// 	id: 8
					// }, 
					{
						name: "拼团福利",
						description: "",
						type: "1",
						id: 9
					}, {
						name: "切换合伙人",
						description: "",
						type: "1",
						id: 10
					}, {
						name: "问卷调查",
						description: "",
						type: "1",
						id: 11
					},
					// {
					// 	name: "企业服务",
					// 	description: "",
					// 	type: "1",
					// 	id: 12
					// }, 
					// {
					// 	name: "我的赠送",
					// 	description: "",
					// 	type: "1",
					// 	id: 13
					// },
					// {
					// 	name: "问卷调查",
					// 	description: "",
					// 	type: "1",
					// 	id: 14
					// }, 
					// {
					// 	name: "企业服务",
					// 	description: "",
					// 	type: "1",
					// 	id: 15
					// }, 
					// {
					// 	name: "我的赠送",
					// 	description: "",
					// 	type: "1",
					// 	id: 16
					// }, 
					// {
					// 	name: "通用设置",
					// 	description: "",
					// 	type: "1",
					// 	id: 17
					// }, {
					// 	name: "意见反馈",
					// 	description: "",
					// 	type: "1",
					// 	id: 18
					// }, 
					{
						name: "协议与规则",
						description: "",
						type: "1",
						id: 19
					}, {
						name: "联系客服",
						description: "",
						type: "1",
						id: 20
					}, {
						name: "退出登录",
						description: "",
						type: "1",
						id: 24
					}
				],
				nickName: "",
				avatarUrl: "",
				isVersion: false,
				nameShop: "", //所在门店
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync("user_info");
			if (this.userInfo) {
				this.avatarUrl = this.userInfo.avatar;
				this.nickName = this.userInfo.nickname;
				this.$refs.login.close();

				this.getUserInfo();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
		},
		onLoad() {
			let version = uni.getSystemInfoSync().SDKVersion
			let wxVersion = this.compareVersion("2.21.4", version)
			if (wxVersion === 1) { // 微信老版本
				this.isVersion = false;
			} else {
				this.isVersion = true;
			}
		},
		methods: {
			getUserInfo() {
				this.$api.getUserInfo({
					longitude: uni.getStorageSync("user_longitude"),
					latitude: uni.getStorageSync("user_latitude")
				}).then((res) => {
					uni.setStorageSync("user_info", res);
					this.userInfo = res;
					console.log(this.userInfo)
					this.nameShop = res.shop_name;
				}).catch((e) => {})
			},
			onNameClick() {
				this.$refs.userName.open();
			},
			onNickname(e) {
				this.nickName = e.detail.value;
			},
			onSureClick() {
				if (this.nickName.length > 0) {
					this.$api.uploadProfile({
						nickname: this.nickName
					}).then((res) => {
						uni.$u.toast("修改成功")
						this.userInfo.nickname = this.nickName;
						uni.setStorageSync("user_info", this.userInfo);
						this.$refs.userName.close();
					}).catch((e) => {
						uni.$u.toast(e.msg === undefined ? "昵称修改失败" : e.msg)
					})
				} else {

				}
			},
			compareVersion(v1, v2) {
				v1 = v1.split('.')
				v2 = v2.split('.')
				const len = Math.max(v1.length, v2.length)

				while (v1.length < len) {
					v1.push('0')
				}
				while (v2.length < len) {
					v2.push('0')
				}

				for (let i = 0; i < len; i++) {
					const num1 = parseInt(v1[i])
					const num2 = parseInt(v2[i])

					if (num1 > num2) {
						return 1
					} else if (num1 < num2) {
						return -1
					}
				}
				return 0

			},
			onAvatarToClick() {
				let chat = this;
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						if (res.errMsg == "chooseImage:ok") {
							chat.uploadProfile(res.tempFilePaths)
						}
					}
				});
			},
			onAvatarClick() {
				this.$refs.user.open();
			},
			onChooseAvatar(e) {

				var data = {
					token: uni.getStorageSync("user_info_token"),
					id: uni.getStorageSync("user_info").id
				}
				let chat = this;
				uni.uploadFile({
					url: this.$api.getBaseUrl() + '/api/common/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: data,
					success: function(res) {
						var path_str = JSON.parse(res.data);

						if (path_str.code == 1) {
							let uurl = path_str.data.fullurl;
							chat.uploadProfile(uurl)
						} else {
							uni.$u.toast(path_str.msg === undefined ? "头像修改失败" : path_str.msg)
						}
					}
				});
			},
			uploadProfile(uurl) {
				this.$api.uploadProfile({
					avatar: uurl
				}).then((res) => {
					uni.$u.toast("修改成功")
					this.userInfo.avatar = uurl;
					uni.setStorageSync("user_info", this.userInfo);
					this.$refs.user.close();
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "头像修改失败" : e.msg)
				})
			},
			onUserInfoClick(e) {

				if (e.code == 200) {
					this.userInfo = uni.getStorageSync("user_info");
					this.avatarUrl = this.userInfo.avatar;
					this.nickName = this.userInfo.nickname;
				}
			},
			onViewVipClick() { //查看特权
				this.$u.route({
					url: '/mine/me/OpenVip',
				})
			},
			onHeartClick() { //随心练
				this.$u.route({
					url: '/mine/me/Heart',
				})
			},
			onPurposeClick() { //心意卡
				this.$u.route({
					url: '/mine/me/Purpose',
				})
			},
			onItemClick(item) {
				if (item.id == 1) { //会员权益
					this.$u.route({
						url: '/mine/me/VipRights',
					})
				} else if (item.id == 2) { //我的收藏
					this.$u.route({
						url: '/mine/me/Collection',
					})
				} else if (item.id == 21) { //我的订单
					this.$u.route({
						url: '/mine/me/Order',
					})
				} else if (item.id == 4) { //排名
					this.$u.route({
						url: '/mine/me/Ranking',
					})
				} else if (item.id == 6) { //绑定手机号
					this.$u.route({
						url: '/mine/me/BindPhone',
					})
				} else if (item.id == 7) { //代金券
					this.$u.route({
						url: '/mine/me/BindPhone',
					})
				} else if (item.id == 8) { //邀请有礼
					this.$u.route({
						url: '/mine/me/Invite',
					})
				} else if (item.id == 9) { //拼团福利
					this.$u.route({
						url: '/mine/me/SpellTogether',
					})
				} else if (item.id == 10) { //合伙人
					this.$u.route({
						url: '/pages/me/CopartnerSwitch',
						params: {
							type: 0,
						}
					})
				} else if (item.id == 11) { //问卷调查
					this.$u.route({
						url: '/mine/me/Survey',
						// url: '/shop/bodyBuilding/Questionnaire',
					})
				} else if (item.id == 19) { //协议与规则
					this.$u.route({
						url: '/mine/me/Agreement',
						params: {
							type: 2,
						}
					})
				} else if (item.id == 20) { //联系客服
					this.$u.route({
						url: '/mine/me/Agreement',
						params: {
							type: 5,
						}
					})
				}else if (item.id == 22) { //账户列表
					this.$u.route({
						url: '/mine/me/AccountList',
					})
				}else if(item.id == 23){//时效卡
					this.$u.route({
						url: '/shop/bodyBuilding/TimeCard',
					})	
				}else if(item.id == 24){//退出登录
					uni.showModal({
						title: '提示',
						content: '确认退出账号？',
						success: async function (res) {
							if (res.confirm) {
								uni.clearStorageSync();
								// that.$store.commit('outLogin');
								uni.$u.toast("退出成功")
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/app/Home'
									});
								}, 1000);
							}
						},
					});
				} else {
					// this.$u.route({
					// 	url: '/pages/me/StoresDetails',
					// })
					this.onNotOpenClick();
				}
			},
			onNotOpenClick() {
				uni.$u.toast("暂未开放")
			},
			onShopClick(){//选择门店
				this.$u.route({
					url: '/mine/home/SeleteStore',
				})
			},
			decryptPhoneNumber(e){ 
			console.log(e);
			if(e.detail.errMsg == 'getPhoneNumber:ok'){
				
				this.$api.bindMiniMobile(e.detail).then((res) => {
					uni.$u.toast("绑定成功")
					console.log(res)
					this.getUserInfo();
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "登录失败" : e.msg)
				})
				
				// const userInfo = await sheep.$store('user').setToken(res.data.token);
				// const userInfo = await sheep.$store('user').getInfo();
			}else{
				uni.$u.toast("请先授权获取手机号")
				return
			}
			
			},
		}
	}
</script>

<style lang="scss">
	.topV {
		height: 330rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #E6A5B4;
		display: flex;
		background-color: #E6A5B4;
		padding: 30rpx 30rpx 58rpx 30rpx;
		box-sizing: border-box;

		.viewV {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.item1 {
				.tv1 {
					font-size: 32rpx;
					color: #fff;
					display: flex;
				}

				.tv2 {
					width: 160rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 10rpx;
					border-radius: 20rpx;
					border: 1px solid #979797;

					.vipIv {
						width: 24rpx;
						height: 24rpx;
						background-color: #00000000;
					}

					.tv {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 11rpx;
					}
				}
			}

			.item2 {
				.tv1 {
					font-size: 28rpx;
					color: #fff;

					.moneyIv {
						width: 24rpx;
						height: 22rpx;
					}
				}

				.tv2 {
					font-size: 28rpx;
					color: #E6A5B4;
					margin-top: 10rpx;
				}
			}
		}

		.topIv {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-color: #E6A5B4;
		}
	}

	.practiceCardV {
		height: 140rpx;
		background: #1F1F1F;
		border-radius: 10px;
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.practiceV {
			flex: 1;
			color: #8D8D8D;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.practiceItemV {
				color: #E8E8E8;
				font-size: 32rpx;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 11rpx;
				}
			}
		}

		.cardV {
			flex: 1;
			color: #8D8D8D;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.cardItemV {
				color: #E8E8E8;
				font-size: 32rpx;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 30rpx;
					height: 24rpx;
					margin-right: 11rpx;
				}
			}
		}
	}

	.bottomV {
		background: #E6A5B4;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		.listV {
			height: 105rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.itemV {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.itemTv1 {
					font-size: 32rpx;
					color: #FFFFFF;
					flex: 4;
				}

				.itemTv2 {
					flex: 6;
					font-size: 28rpx;
					color: #E6A5B4;
					display: flex;
					justify-content: flex-end;
					margin-right: 7rpx;
				}

				.itemTv3 {
					flex: 6;
					font-size: 28rpx;
					color: #E8E8E8;
					display: flex;
					justify-content: flex-end;
					margin-right: 7rpx;
				}
			}

			.lineV {
				background: #FFFFFF;
				height: 1rpx;
			}
		}
	}

	.alert-wrapper {
		width: 60vw;
		padding: 40rpx 30rpx 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: #1F1F1F;

		.title-wrapper {
			width: 100%;
			color: #f8f8f8;
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			margin-bottom: 40rpx;
		}

		.quedingTv {
			height: 88rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;
			background-color: #CEF743;
			color: #333;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item-wrapper {
			height: 88rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #333;
			padding-left: 30rpx;
			padding-right: 30rpx;

			input {
				font-size: 30rpx;
				color: #fff;
			}
		}

		.avator {
			margin: 0 auto;
			position: relative;
			display: block;
			vertical-align: middle;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			overflow: hidden;

			.text {
				position: absolute;
				text-align: center;
				color: #fff;
				font-size: 20rpx;
				width: 100%;
				height: 44rpx;
				line-height: 44rpx;
				background-color: rgba(0, 0, 0, 0.7);
				bottom: 0;
				left: 0;
			}
		}
	}

	.shopV {
		display: flex;
		align-items: center;
		margin-top: 10rpx;

		.shopIv {
			width: 20rpx;
			height: 20rpx;
		}

		.shopTv {
			font-size: 24rpx;
			margin-left: 10rpx;
			color: #FFFFFF;
		}
	}
	.mlogin{
		background: #E6A5B4;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		.zhangname{
			color: #fff;
			font-size: 28rpx;
			font-weight: normal;
		}
	}
	.loginTv1_new {
		width: 125rpx;
		height: 62rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 50rpx;
		padding: 0;
		font-size: 13px;
		font-weight: 500;
		color: white;
		margin-left: auto;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 0 !important;
		border: none;
	}
	button::after {
		border:  none !important;
	}
</style>
